<template>
    <h1>APP 组件</h1>

    <h4>num: {{ num }}</h4>
    <button @click="setNum">修改num</button>

    <h4>info.name {{ info.name }}</h4>
    <button @click="setInfoName">改名</button>

    <hr>

    <h4>商品名： {{ obj.title }}</h4>
    <button @click="setTitle">修改商品名</button>

    <h4>商品价格: {{ obj.info.price }}</h4>
    <button @click="setPrice">修改商品价格</button>
</template>

<script setup>
import { shallowRef, shallowReactive } from 'vue'

const num = shallowRef(100)
function setNum () {
    num.value++
}

const info = shallowRef({
    id: 'qfoo1',
    name: '张三'
})

function setInfoName () {
    info.value.name = '李四',
    console.log('info.value.name: ', info.value.name);
}

const obj = shallowReactive({
    title: '苹果',
    info: {
        id: 'xf001',
        price: 100
    }
})

function setTitle () {
    obj.title = '香蕉'
}
function setPrice() {
    obj.info.price = 200
    console.log('obj.info.price', obj.info.price)
}
</script>


